<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-11 18:59:33
 * @LastEditTime: 2019-10-18 11:29:54
 * @LastEditors: Please set LastEditors
 -->
<template>
  <header class="mo-header">
    <div class="header-pc">
      <div class="header-ctl" @click="showHeader">
        <div class="contral">
          <Icon type="md-browsers" size="30" color="white" />
        </div>
      </div>
      <Row class="pc-header-row">
        <Col :lg="{span:12,offset:4}" :xs="{span:12}" :md="{span:12}" class="header-col">
          <router-link to="/">
            <div class="header-col-logo" @click="resetHeader"></div>
          </router-link>
          <div style="display:flex" @click="selectNav">
            <router-link to="/anli">
              <div class="header-col-nav header-nav1" id="1">首页</div>
            </router-link>
            <router-link to="/article">
              <div class="header-col-nav header-nav2" id="2">文章</div>
            </router-link>
            <router-link to="/music">
              <div class="header-col-nav header-nav3" id="3">音乐</div>
            </router-link>
            <router-link to="/player">
              <div class="header-col-nav header-nav4" id="4">影音</div>
            </router-link>
            <router-link to="/honer">
              <div class="header-col-nav header-nav5" id="5">名人堂</div>
            </router-link>
          </div>
        </Col>
        <Col :lg="{span:4}" :xs="{span:12}" class="header-col right">
          <div class="header-col-user">
            <div v-if="logins" class="header-col-user-login">
              <img :src="userinfo.avatar" alt />
              <div class="header-col-user-box">
                <div class="userbox-item">
                  <span style="font-size:14px">{{userinfo.nickname}}</span>
                </div>
                <div class="userbox-item">
                  <label style="background-color:black;">LV.2</label>
                </div>
                <div class="mysee">
                  <div class="mysee-son">
                    <div class="mysee-son-item">
                      <p>积分</p>
                      <p style="color:pink">{{userinfo.score}}</p>
                    </div>
                    <div class="mysee-son-item">
                      <p>关注</p>
                      <p>104</p>
                    </div>
                    <div class="mysee-son-item">
                      <p>粉丝</p>
                      <p>104</p>
                    </div>
                  </div>
                  <h4 style="margin-top:10px;">选项卡</h4>
                  <div class="mysee-slt">
                    <span>订阅中心</span>
                    <span>基础资料</span>
                  </div>
                  <div class="mysee-slt">
                    <span>我的关注</span>
                    <span>我的收藏</span>
                  </div>
                  <div class="mysee-slt">
                    <span>历史记录</span>
                    <span @click="exitLogin">退出登录</span>
                  </div>
                </div>
              </div>
            </div>
            <router-link to="/login">
              <div v-if="!logins" class="header-col-nav2">登录</div>
            </router-link>
          </div>
          <div class="pc-android">
            <div class="header-col-nav2 header-col-mes">
              <span>消息</span>
              <sup>1</sup>
            </div>
          </div>
          <div class="header-col-nav2">
            <Dropdown>
              <a href="javascript:void(0)" style="color:black" class="header-config">
                设置
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <router-link to="/userinfo">
                  <DropdownItem v-if="logins">个人资料</DropdownItem>
                </router-link>
                <router-link to="/contribute">
                  <DropdownItem v-if="logins">我的作品</DropdownItem>
                </router-link>
                <router-link to="/write">
                  <DropdownItem v-if="logins">我要投稿</DropdownItem>
                </router-link>
                <DropdownItem v-if="logins">我的收藏</DropdownItem>
                <DropdownItem>系统设置</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Col>
      </Row>
    </div>
    <div class="header-android"></div>
  </header>
</template>
<script>
import $ from "jquery";
import { setTimeout, clearTimeout } from "timers";
import { Dropdown, DropdownMenu, DropdownItem, Alert } from "view-design";
export default {
  name: "moHeader",
  data() {
    return {
      isUserbox: false,
      timelock: false,
      timer: null,
      selectItem: 0,
      userinfo: ""
    };
  },
  props: ["id"],
  computed: {
    logins: function() {
      //登陆后的用户信息
      return this.id;
    }
  },
  watch: {
    id: function(val) {
      this.$axios
        .get(this.$store.getters.url + "/userinfo?id=" + val)
        .then(res => {
          this.userinfo = res.data.data;
          console.log(this.userinfo);
        });
    }
  },
  created() {},
  mounted() {
    console.log(this.$route);
    switch (sessionStorage.getItem("route")) {
      case "/anli": {
        $(".header-nav1").addClass("header-col-nav-back");
        return;
      }
      case "/article": {
        $(".header-nav2").addClass("header-col-nav-back");
        return;
      }
      case "/player": {
        $(".header-nav4").addClass("header-col-nav-back");
        return;
      }
      case "/honer": {
        $(".header-nav5").addClass("header-col-nav-back");
        return;
      }
    }
  },
  methods: {
    //选择导航栏
    selectNav: function(e) {
      $(".header-col-nav").removeClass("header-col-nav-back");
      $(".header-nav" + e.target.id).addClass("header-col-nav-back");
    },
    //隐藏上下栏目
    goLogin: function() {
      $(".mo-header").css("top", "-45px");
      this.$store.dispatch("goLogin");
    },
    //显示上下栏目
    showHeader: function() {
      $(".mo-header").css("top", "0px");
      this.$store.dispatch("noLogin");
    },
    resetHeader: function() {
      $(".header-col-nav").removeClass("header-col-nav-back");
    },
    exitLogin: function() {
      //退出登录
      this.$axios.get(this.$store.getters.url + "/exit");
      setTimeout(() => {
        document.location.reload();
      }, 300);
      this.$Message.info("退出成功");
    }
  },
  components: {
    Dropdown: Dropdown,
    DropdownMenu: DropdownMenu,
    DropdownItem: DropdownItem
  }
};
</script>
<style lang="scss" scoped>
$hoverColor: rgb(221, 221, 221);
@media screen and (max-width: 600px) {
  .header-pc {
    display: none;
  }
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  .pc-android {
    display: none;
  }
}
.mo-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  transition: top 0.4s;
  z-index: 999;
  box-shadow: 0px 0px 4px black;
  font-size: 12px;
}
.header-android {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  height: 45px;
  z-index: 900;
}
.header-pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  // background-color: white;
  height: 45px;
  box-shadow: 0px 0px 2px $hoverColor;
  z-index: 999;
  .pc-header-row {
    position: relative;
    z-index: 20;
    height: 100%;
    background-color: white;
    .header-col {
      display: flex;
      height: 100%;
    }
    .right {
      position: relative;
      justify-content: flex-end;
    }
  }
}
.header-ctl {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  justify-content: center;
  z-index: 10;
  .contral {
    width: 30px;
    height: 30px;
    // background-color: black;
    background-size: contain;
    opacity: 0.4;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
}
.header-col-logo {
  width: 120px;
  height: 100%;
  background-image: url("../../../assets/img/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 12px;
}
.header-col-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 100%;
  color: black;
  cursor: pointer;
  // transition: all .4s;
  &:hover {
    border-bottom: 3px solid black;
  }
}
.header-col-nav2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 100%;
  color: black;
}
.header-col-nav-back {
  border-bottom: 3px solid black;
  // transition: color ease-in-out .4s;
}
.header-col-mes sup {
  background-color: red;
  font-size: 12px;
  height: 14px;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 7px;
  margin-left: 4px;
}
.header-col-user {
  position: relative;
  width: 80px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover img {
    animation: showImg 0.4s ease-in-out;
    animation-fill-mode: forwards;
  }
  &:hover .header-col-user-box {
    display: inline-block;
    animation: showInfo 0.4s ease-in-out;
    animation-fill-mode: forwards;
  }
  img {
    position: relative;
    border-radius: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 0 2px rgba(119, 119, 119, 0.8);
  }
  .header-col-user-login {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}
.header-col-user-box {
  position: absolute;
  top: 45px;
  left: -67px;
  width: 200px;
  height: 240px;
  background-color: white;
  border-radius: 6px;
  display: none;
  opacity: 1;
  transition: 0.4s all;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
  .userbox-item {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    label {
      border-radius: 5px;
      color: white;
      font-size: 12px;
      font-weight: 600;
      padding-left: 6px;
      padding-right: 6px;
      margin-top: 2px;
    }
  }
  .userbox-item:nth-of-type(1) {
    margin-top: 20px;
  }
  .mysee {
    width: 100%;
    height: auto;
    .mysee-son {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 10px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      height: 44px;
      padding-top: 2px;
      padding-bottom: 2px;
      .mysee-son-item {
        width: 530px;
        height: 40px;
        p {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p:nth-of-type(1) {
          font-size: 14px;
        }
      }
    }
    .mysee-slt {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      text-align: center;
      padding-left: 30px;
      padding-right: 30px;
      cursor: pointer;
      span {
        &:hover {
          color: pink;
        }
      }
    }
  }
}
.header-config {
  display: inline-flex;
  width: 80px;
  height: 45px;
  justify-content: center;
  align-items: center;
}
.userbox-show {
  animation: showUserinfo 0.4s ease-in-out;
  animation-fill-mode: forwards;
}
.userbox-hide {
  animation: hideUserinfo 0.4s ease-in-out;
  animation-fill-mode: forwards;
}
.userbox-enter-active,
.userbox-leave-active {
  transition: all 0.4s ease-in-out;
}
.userbox-enter,
.userbox-leave-to {
  opacity: 0;
  top: 60px;
}
@keyframes showImg {
  0% {
    transform: scale(1);
    top: 0px;
  }
  100% {
    transform: scale(1.5);
    top: 15px;
    box-shadow: 0px 0px 4px black;
  }
}
@keyframes showInfo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

